<script setup lang="ts">
defineOptions({
    name: 'FollowDoctor'
})
import type { DoctorList } from '@/types/consult'
import { ref, onMounted } from 'vue'
import DoctorCard from './DoctorCard.vue'
import { useWindowSize } from '@vueuse/core';
import { getDoctorListAPI } from '@/apis/consult';
const { width: dwidth } = useWindowSize()

// const dWidth = ref(0)
// // 当页面加载或者设备的尺寸发生变化时都应该获取设备的宽度
// const setWidth = () => (dWidth.value = window.innerWidth)
// onMounted(() => {
//   setWidth()
//   window.addEventListener('resize', setWidth)
// })

// onUnmounted(() => {
//   window.removeEventListener('resize', setWidth)
// })

// 定义函数 发送请求获取医生列表
// 准备响应式数据
const list = ref<DoctorList>()
const getDoctorList = async () => {
    const res = await getDoctorListAPI({
        current: 1,
        pageSize: 5
    })
    // console.log(res)
    list.value = res.data.rows
}

onMounted(() => {
    getDoctorList()
})
</script>

<template>
    <div class="follow-doctor">
        <div className="head">
            <p>推荐关注</p>
            <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
        </div>
        <div class="body">
            <!-- swipe 组件 -->
            <!-- loop 是否循环播放 -->
            <!-- show-indicators 是否现实指示器 -->
            <!-- width 设置宽度 -->
            <van-swipe :loop="false" :show-indicators="false" :width="(150 / 375) * dwidth">
                <van-swipe-item v-for="item in list" :key="item.id">
                    <DoctorCard :item="item"></DoctorCard>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
    background-color: var(--cp-bg);
    height: 250px;

    .head {
        display: flex;
        justify-content: space-between;
        height: 45px;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;

        >a {
            color: var(--cp-tip);
        }
    }

    .body {
        width: 100%;
        overflow: hidden;
    }
}
</style>